<template>
  <div>
    <ProPanel :columns="columns" :groups="groups" :data="formData"></ProPanel>
  </div>
</template>

<script setup lang="ts">
import ProPanel from '@/components/pro-panel/index.vue';
import { Column, Group } from '@/components/pro-panel/index.typing';

defineOptions({
  name: 'TerrainLayer',
});

const groups = computed<Group[]>(() => {
  return [
    {
      key: 'terrain',
      title: '地形',
      collapsed: true,
      switchVisible: true,
    },
  ];
});

const columns = computed<Column[]>(() => {
  return [
    {
      type: 'input',
      prop: 'name',
      label: '名称',
      required: true,
      rules: [{ required: true, message: '名称不能为空' }],
    },
    {
      type: 'image-selector',
      prop: 'img',
      label: '',
      group: 'terrain',
    },
    {
      type: 'progress-input',
      prop: 'exaggeration',
      label: '夸张系数',
      group: 'terrain',
      formProps: {
        min: 0,
        max: 2,
        step: 0.01,
      },
    },
  ];
});

const formData = ref<any>({
  name: '123',
  img: require('@/assets/png/terrain/cesium.png'),
  exaggeration: 1,
  terrain: true,
});

watch(
  () => formData.value,
  () => {
    // TODO 判断更新来源是来自 form 表单
    console.log('222watch formData.value', formData.value);
    // cimInstance.api.updateGraphic()
  },
  {
    deep: true,
  }
);
</script>

<style lang="less" scoped></style>
